<template>
  <div class="basic-markdown">
    <textarea v-if="showSource" readonly rows="10" style="width: 100%; padding: 10px; background: #f5f5f5; border: 1px solid #ccc; border-radius: 4px;" v-bind:value="text"></textarea>
    
    <div v-if="text" class="markdown-content">
      <!-- 简单渲染标题 -->
      <div v-html="renderedText"></div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'BasicMarkdown',
  props: {
    text: {
      type: String,
      required: true,
      default: ''
    },
    showSource: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    // 非常简单的Markdown渲染
    const renderedText = computed(() => {
      if (!props.text) return ''
      
      let html = props.text
        // 代码块
        .replace(/```([^`]*?)```/g, '<pre><code>$1</code></pre>')
        // 行内代码
        .replace(/`([^`]+)`/g, '<code>$1</code>')
        // 标题
        .replace(/^# (.+)$/gm, '<h1>$1</h1>')
        .replace(/^## (.+)$/gm, '<h2>$1</h2>')
        .replace(/^### (.+)$/gm, '<h3>$1</h3>')
        // 粗体和斜体
        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
        .replace(/\*([^*]+)\*/g, '<em>$1</em>')
        // 换行
        .replace(/\n/g, '<br>')
      
      return html
    })
    
    return {
      renderedText
    }
  }
}
</script>

<style scoped>
.basic-markdown {
  width: 100%;
  margin: 0;
  padding: 0;
}

.markdown-content {
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 10px;
}

.markdown-content code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 4px;
}

.markdown-content pre {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
}
</style> 